<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="content">
            <div class="top-title">修改员工</div>
            <div class="title">基础信息</div>
            <el-form :model="form" label-width="102px" ref="form" label-position="right" :rules="rules">
                <el-row :gutter="41">
                    <el-col :span="10">
                        <el-form-item label="用户名">
                            {{form.account}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="10">
                        <el-form-item label="真实姓名" prop="userName">
                            <el-popover placement="top-start" trigger="focus" content="字符长度不大于10个">
                                <el-input slot="reference" v-model="form.userName" :minlength="2" :maxlength="10" placeholder="请输入真实姓名"></el-input>
                            </el-popover>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="10">
                        <el-form-item label="绑定手机号" prop="phone">
                            <el-input v-model="form.phone" :maxlength="11" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="10">
                        <el-form-item label="角色" prop="roleId">
                            <el-select v-model="form.roleId" placeholder="请选择角色" style="width:100%">
                                <el-option v-for="item in getRoleList" :key="item.pId" :label="item.sName" :value="item.pId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <span class="describe">可在权限管理模块增、删、改、查角色名称以及角色权限。</span>
                    </el-col>
                </el-row>
        </el-form>
        <div class="title">负责区域</div>
        <el-row :gutter="41">
            <el-col :span="4">
                <el-checkbox-group v-model="newMaps">
                    <el-checkbox v-for="item in form.orgRegionMaps" :key="item.id" :label="item.region"></el-checkbox>
                </el-checkbox-group>
            </el-col>
        </el-row>
        
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="confirm('form')">确 定</el-button>
        </div>
        </div>
    </div>
</template>
<script>
import Levelbar from '../../layout/Levelbar';
import { getAgentStaffInfo, getAgentRoleList, updateAgentStaff} from 'api/userManage';
export default {
    components: {
        Levelbar
    },
    created() {
        this.getinof()
    },
    data() {
        return {
            form: {
                roleId: ''
            },
            // 新修改区域集合
            newMaps: [],
            // 传递给后台的区域数据集合
            pushMaps: [],
            // 角色集合
            getRoleList: [],
            rules: {
                userName: [
                    { required: true, message: '请输入真实姓名', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
                    { pattern: /^[\u4E00-\u9FA5]+$/, message: '请输入中文姓名' }
                ],
                phone: [
                    { required: true, message: '联系方式不能为空' },
                    { max: 11, min: 11, message: '手机号必须为11数字' },
                    {
                        pattern: /^((0\d{2,3}-\d{7,8})|(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1}))+\d{8}))$/,
                        message: '请输入正确的手机号',
                        trigger: 'blur'
                    }
                ],
                roleId: [
                    { required: true, message: '请选择角色', trigger: 'change' }
                    // { validator: ruleInof, trigger: 'change'}
                ]
            }
        };
    },
    methods: {
        // 获取修改信息表
        getinof() {
            // 获取角色
            getAgentRoleList().then(data => {
                this.getRoleList = data.data.content;
                this.getRoleList.unshift({sName: '请选择', pId: ''})
            })
            getAgentStaffInfo(this.$route.params.id).then(data => {
                this.form = data.data.content;
                // 找相同的数组集合
                this.form.orgUserRegionMaps.forEach(item => {
                    this.newMaps.push(item.region)
                })
            })
        },

    // 取消
        cancel() {
            this.$router.go(-1)
        },
    // 确认
        confirm(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    this.$confirm('确认修改?', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: ' '
                    }).then(() => {
                        this.newMaps.forEach(item => {
                            // pushorgUserMaps
                            this.form.orgRegionMaps.forEach(val => {
                                if (item == val.region) {
                                    this.pushMaps.push(val)
                                }
                            })
                        })
                        updateAgentStaff(
                            this.$route.params.id,
                            this.form.userName,
                            this.form.phone,
                            this.form.roleId,
                            this.pushMaps
                        ).then(data => {
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                            this.$router.push({ path: '/userManage' })
                        }).catch(Error => {
                            this.$message(Error);
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                } else {
                    return false;
                }
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.el-checkbox{
    display: block;
    margin-bottom: 5px;
    &+ .el-checkbox {
        margin-left: 0;
    }
}
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  .content {
    padding: 0 50px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    background: #fff;
    .title {
        margin: 40px 0;
        font-size: 14px;
        color: #333;
        line-height: 14px;
        border-left: 4px solid #ff5e2c;
        text-indent: 16px;
    //   &::after {
    //     position: absolute;
    //     content: "";
    //     width: 4px;
    //     height: 14px;
    //     background: #ff5e2c;
    //     left: 0;
    //     top: 4px;
    //   }
    }
    form {
      padding-bottom: 40px;
    }
  }
}
.top-title {
    padding-top:8px;
    text-align: center;
    font-size: 18px;
    color: #333;
    line-height: 72px;
    font-weight: bold;
    font-family: Microsoft YaHei;
    border-bottom: 1px solid #ddd;
}
.describe {
  color: #999;
  font-size: 14px;
  line-height: 36px;
}
.dialog-footer {
  text-align: center;
  padding: 30px 0;
}
</style>

